﻿@page "/install-maui"
@inject IStringLocalizer<Install_Maui> Localizer
@inject VersionService VersionManager

<h3>@Title</h3>

<h4>@Localizer["H1"]</h4>

<p class="mt-3">@Localizer["P1"]</p>
<ul>
    <li><code>visual studio 2022 17.3.0</code> @Localizer["P2"] </li>
    <li><code>net6</code></li>
</ul>

<h4>@Localizer["P3"]</h4>

<h5 class="mb-3">@Localizer["P4"]</h5>
<div class="code-label mb-2">1.Visual Studio 2022</div>
<div class="code-label mb-2">2. @Localizer["P5"]</div>
<div class="code-label mb-2">3. @Localizer["P6"] <b>@Localizer["P7"]</b> @Localizer["P8"] <b>@Localizer["P9"]</b>, @Localizer["P10"] <b>@Localizer["P11"]</b>, <b>@Localizer["P12"]</b></div>
<img src="_content/BootstrapBlazor.Shared/images/choose-project-template-maui-blazor.png" style="border-radius: 6px;" class="d-none d-sm-block" />
<h5 class="mt-3 mb-2">@Localizer["P13"]</h5>
<div class="code-label mb-2">@((MarkupString)Localizer["P14"].Value)</div>
<div class="mb-2">@Localizer["P15"] <b>Manage Nuget Packages</b></div>
<Pre @key="@Version" class="no-highlight">dotnet add package BootstrapBlazor --version @Version</Pre>
<img src="_content/BootstrapBlazor.Shared/images/manage-nuget-packages-for-maui-app.png" style="border-radius: 6px;" class="d-none d-sm-block" />
<div class="code-label mt-3 mb-2">@Localizer["P16"]</div>
<img src="_content/BootstrapBlazor.Shared/images/nuget_install.png" style="width: 1000px; border-radius: 6px;" class="d-none d-sm-block" />
<div class="code-label mt-3 mb-2">@Localizer["P17"]</div>
<div class="mb-3">@Localizer["P18"]</div>
<ul>
    <li><code>~/wwwroot/index.html</code> </li>
</ul>
<Tips>
    <div>@((MarkupString)Localizer["P33"].Value)</div>
</Tips>
<Pre>&lt;head&gt;
    ...
<b>
    &lt;!-- @Localizer["P19"] !--&gt;
    &lt;link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet"&gt;
    &lt;link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"&gt;
</b>
    ...
    &lt;link href="css/app.css" rel="stylesheet"&gt;
    &lt;link href="MauiApp1.styles.css" rel="stylesheet"&gt;
&lt;/head&gt;</Pre>
<div class="code-label mb-3">@Localizer["P20"]</div>
<ul>
    <li><code>~/wwwroot/index.html</code> </li>
</ul>
<Pre>&lt;body&gt;
    ...
    &lt;!-- @Localizer["P21"] !--&gt;
    <b>&lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;</b>
    ...
    &lt;script src="_framework/blazor.webview.js" autostart="false" &gt;&lt;/script&gt;
&lt;/body&gt;</Pre>
<div class="code-label mb-2">@Localizer["P22"]</div>
<ul>
    <li><code>MauiProgram.cs</code></li>
</ul>
<div class="mb-2"><b>MauiProgram.cs</b></div>
<Pre>var builder = MauiApp.CreateBuilder();

builder.Services.AddMauiBlazorWebView();

// @Localizer["CodeComment"]
<b><i>builder.Services.AddBootstrapBlazor();</i></b>

return builder.Build();
</Pre>
<div class="code-label mb-2">@Localizer["P23"]</div>
<div class="mb-1">@Localizer["P24"] <code>~/_Imports.razor</code> @Localizer["P25"] <code>Razor</code> @Localizer["P26"]</div>
<Pre><b>@@using BootstrapBlazor.Components</b></Pre>

<div class="code-label mb-2">@Localizer["P27"] <code>BootstrapBlazorRoot</code> @Localizer["P28"] <code>~/Main.razor</code> @Localizer["P29"]</div>
<Pre>&lt;BootstrapBlazorRoot&gt;
    &lt;Router AppAssembly="@@typeof(App).Assembly"&gt;
        &lt;Found Context="routeData"&gt;
            &lt;PageTitle&gt;Title&lt;/PageTitle&gt;
            &lt;RouteView RouteData="@@routeData" DefaultLayout="@@typeof(MainLayout)" /&gt;
            &lt;FocusOnNavigate RouteData="@@routeData" Selector="h1" /&gt;
        &lt;/Found&gt;
    &lt;NotFound&gt;
            &lt;PageTitle&gt;Not found&lt;/PageTitle&gt;
                &lt;LayoutView Layout="@@typeof(MainLayout)"&gt;
                &lt;p&gt;@Localizer["P30"] ...&lt;/p&gt;
            &lt;/LayoutView&gt;
        &lt;/NotFound&gt;
    &lt;/Router&gt;
&lt;/BootstrapBlazorRoot&gt;</Pre>

<h5 class="mb-3">@Localizer["P31"]</h5>
<div class="mt-2 mb-1">@((MarkupString)Localizer["P32"].Value)</div>
<div class="code-label mb-2">@Localizer["P34"] <code>Button</code> @Localizer["P35"]</div>
<Pre>&lt;Button Color="Color.Primary" Icon="fa-solid fa-font-awesome" Text="@Localizer["P36"]" /&gt;</Pre>
<div class="code-label mb-2">@Localizer["P37"] <b>Visual studio 2022</b> @Localizer["P38"] <kbd>F5</kbd> @Localizer["P39"]</div>
<img src="_content/BootstrapBlazor.Shared/images/preview-maui.png" style="border-radius: 6px;" class="d-none d-sm-block" />

<h4 class="code-label mb-2">@Localizer["P40"]</h4>
<div class="code-label mb-2">@Localizer["P41"] <code>NativeContent.xaml</code> @Localizer["P42"]</div>
<ul>
    <li><code>NativeContent.xaml</code></li>
</ul>
<Pre>&lt;ContentView
    x:Class="MauiApp1.Pages.NativeContent"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"&gt;
    &lt;VerticalStackLayout
        Padding="30,0"
        Spacing="25"
        VerticalOptions="Center"&gt;

        &lt;Image
            HeightRequest="200"
            HorizontalOptions="Center"
            SemanticProperties.Description="Cute dot net bot waving hi to you!"
            Source="dotnet_bot.png" /&gt;

        &lt;Label
            FontSize="32"
            HorizontalOptions="Center"
            SemanticProperties.HeadingLevel="Level1"
            Text="Hello, World!" /&gt;

        &lt;Label
            FontSize="18"
            HorizontalOptions="Center"
            SemanticProperties.Description="Welcome to dot net Multi platform App U I"
            SemanticProperties.HeadingLevel="Level2"
            Text="Welcome to .NET Multi-platform App UI" /&gt;

        &lt;Button
            x:Name="CounterBtn"
            Clicked="OnCounterClicked"
            HorizontalOptions="Center"
            SemanticProperties.Hint="Counts the number of times you click"
            Text="Click me" /&gt;

    &lt;/VerticalStackLayout&gt;
&lt;/ContentView&gt;</Pre>
<ul>
    <li><code>NativeContent.xaml.cs</code></li>
</ul>
<Pre>public partial class NativeContent : ContentView
{
    public NativeContent()
    {
        InitializeComponent();
    }

    int count = 0;

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;

        if (count == 1)
            CounterBtn.Text = $"Clicked {count} time";
        else
            CounterBtn.Text = $"Clicked {count} times";
    }
}</Pre>
<div class="code-label mb-2">@Localizer["P43"] <code>MainPage.xaml</code> @Localizer["P44"] <code>ContentPage</code> @Localizer["P45"]  <code>TabbedPage</code>@Localizer["P46"] <code>NavigationPage</code> @Localizer["P47"]  </div>
<ul>
    <li><code>MainPage.xaml</code></li>
</ul>
<Pre>&lt;TabbedPage
    x:Class="MauiApp1.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    xmlns:pages="clr-namespace:MauiApp1.Pages"
    BackgroundColor="{DynamicResource PageBackgroundColor}"&gt;
    &lt;ContentPage Title="Home"&gt;
        &lt;BlazorWebView HostPage="wwwroot/index.html"&gt;
            &lt;BlazorWebView.RootComponents&gt;
                &lt;RootComponent ComponentType="{x:Type pages:Index}" Selector="#app" /&gt;
            &lt;/BlazorWebView.RootComponents&gt;
        &lt;/BlazorWebView&gt;
    &lt;/ContentPage&gt;
    &lt;ContentPage Title="NativeContent"&gt;
        &lt;pages:NativeContent /&gt;
    &lt;/ContentPage&gt;
    &lt;ContentPage Title="Counter"&gt;
        &lt;BlazorWebView HostPage="wwwroot/index.html"&gt;
            &lt;BlazorWebView.RootComponents&gt;
                &lt;RootComponent ComponentType="{x:Type pages:Counter}" Selector="#app" /&gt;
            &lt;/BlazorWebView.RootComponents&gt;
        &lt;/BlazorWebView&gt;
    &lt;/ContentPage&gt;
    &lt;ContentPage Title="Weather"&gt;
        &lt;BlazorWebView HostPage="wwwroot/index.html"&gt;
            &lt;BlazorWebView.RootComponents&gt;
                &lt;RootComponent ComponentType="{x:Type pages:FetchData}" Selector="#app" /&gt;
            &lt;/BlazorWebView.RootComponents&gt;
        &lt;/BlazorWebView&gt;
    &lt;/ContentPage&gt;
&lt;/TabbedPage&gt;</Pre>
<ul>
    <li><code>MainPage.xaml.cs</code></li>
</ul>
<Pre>public partial class MainPage : TabbedPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}</Pre>
<div class="code-label mb-2">@Localizer["P48"] <b>Visual studio 2022</b> @Localizer["P49"] <kbd>F5</kbd> @Localizer["P50"]</div>

<img src="_content/BootstrapBlazor.Shared/images/maui-blazor.gif" style="border-radius: 6px;width: 320px;" class="d-none d-sm-block" />

@code
{
    private string Version { get; set; } = "latest";
    [Parameter]
    public string Title { get; set; } = "";

    protected override async Task OnInitializedAsync()
    {
        Version = await VersionManager.GetVersionAsync();
        Title = @Localizer["P51"];
    }
}
